<script setup>
import { onPullDownRefresh } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import ShopPopup from '@/components/index/ShopPopup.vue'
import NoticePopup from '@/components/index/NoticePopup.vue'
import { useMapStore } from '@/stores/map'
import NavBar from '@/components/NavBar.vue'
import DrawMap from '@/components/index/DrawMap.vue'
import { getBannerList } from '@/api/index'
import { fixCoverImageUrl } from '@/utils/fixImageUrls'

// banner列表
const bannerList = ref([])
async function onGetBannerList() {
  const { result } = await getBannerList()
  bannerList.value = result.map(item => ({ ...item, url: fixCoverImageUrl(item.cover) }))
}

// 菜单列表
const menuItem = [
  { name: '酒店餐饮', route: '/pages/index/view/business', icon: '../../static/image/index/icon-1.jpg' },
  { name: '美食推荐', route: '/pages/index/view/food-recommend', icon: '../../static/image/index/icon-2.jpg' },
  { name: '通知公告', route: '/pages/index/view/notice', icon: '../../static/image/index/icon-3.jpg' },
  { name: '意见反馈', route: '/pages/index/view/complaint', icon: '../../static/image/index/icon-4.jpg' },
]
// 跳转轮播图详情
function goBannerDetail(id) {
  uni.navigateTo({ url: `/pages/index/view/banner-detail?id=${id}` })
}
// 跳转菜单详情
function goMenuDetail(route) {
  uni.navigateTo({ url: route })
}

// 地图相关
const { onGetMapConfig, onGetMapShopList, onGetMapSightList } = useMapStore()
const { isMapReady } = storeToRefs(useMapStore())
const mapHeight = ref(0) // 手绘地图高度
// 计算获取地图高度
async function onGetMapHeight() {
  const { safeAreaInsets: { bottom } } = await uni.getSystemInfo()
  const query = uni.createSelectorQuery()
  query.select('.container').boundingClientRect().exec()
  query.select('.top-of-map').boundingClientRect().exec((res) => {
    const [container, top] = res
    // = 父容器高度 - 顶部元素高度 - 底部安全区 - TabBar高度 - TabBar间距
    mapHeight.value = container.height - top.height - bottom - 50 - 30
  })
}

onMounted(() => {
  onGetBannerList()
  onGetMapHeight()
  onGetMapConfig()
  onGetMapShopList()
  onGetMapSightList()
})

onPullDownRefresh(async () => {
  await onGetBannerList()
  uni.stopPullDownRefresh()
})
</script>

<template>
  <view class="container h-screen">
    <NavBar title="金榜牛乳街" title-color="#fff" :show-left-icon="false" />
    <main class="px-1.5 pt-1.5">
      <view class="top-of-map">
        <view class="mb-1.5 rounded-xl overflow-hidden">
          <swiper
            class="bg-white h-280"
            circular
            indicator-dots
            autoplay
            indicator-active-color="#FBA414"
          >
            <swiper-item v-for="item in bannerList" :key="item.id" @click="goBannerDetail(item.id)">
              <image class="h-full w-full" :src="item.url" mode="aspectFill" />
            </swiper-item>
          </swiper>
        </view>
        <view class="px-4 mb-1.5 bg-white rounded-xl shadow flex h-140 justify-around">
          <view v-for="(item) in menuItem" :key="item.name" class="py-2 center flex-col" @click="goMenuDetail(item.route)">
            <image class="mb-1.5 block h-68 w-68" :src="item.icon" mode="aspectFit" />
            <p class="text-xs">
              {{ item.name }}
            </p>
          </view>
        </view>
      </view>
      <DrawMap v-if="isMapReady" :height="mapHeight" />
    </main>
    <ShopPopup />
    <NoticePopup />
  </view>
</template>

<style scoped>
.container {
  background-image: linear-gradient(to bottom, #fba414 10%, #f3f3f3 40%);
}
</style>
